<template>
  <div class="user_migration table-theme">
      <head-title title="用户--用户迁徒"></head-title>
      <el-card>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
              <el-form-item label="用户ID:" prop="user_id">
                <el-input v-model="ruleForm.user_id"></el-input>
              </el-form-item>
              <el-form-item label="商家名称:" prop="store_id">
                <el-select v-model="ruleForm.store_id" placeholder="请选择">
                    <el-option v-for="item in storeList" :key="item.store_id" :label="item.store_name" :value="item.store_id"></el-option>
                </el-select>
              </el-form-item>
               <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
          </el-form>
      </el-card>
  </div>
</template>

<script>
export default {
    data () {
        return {
            ruleForm:{
                user_id:"",
                filiale_id:localStorage.getItem('filiale_id'),
                store_id:""
            },
            rules:{
                user_id:[
                    {required: true, message: '请输入用户ID', trigger: 'blur'}
                ],
                store_id:[
                    {required:true,message:'请选择子公司',trigger:''}
                ]
            },
            storeList:[]
        }
    },
    methods:{
        init(){
            this.$http(this.$ApiList.StoreItems).then(res=>{
                this.storeList = res.datas
            })
        },
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    this.$http(this.$ApiList.UserTransfer,this.ruleForm).then(res=>{
                        this.$message({
                            message:res.datas,
                            type:'success'
                        })
                        this.$refs[formName].resetFields();
                    })
                }else{
                    this.$message.error('请将必填项进行填写');
                }
            })
        },
        resetForm(formName){
            this.$refs[formName].resetFields();
        }
    },
    created () {
        this.init();
    }
}
</script>

<style lang="scss" scoped>
.ruleForm{
    width: 700px;
    .el-select{
        width: 100%;
    }
}
</style>